<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="theme-color" content="#2563eb">
    <title>豪华地产 - 房贷计算器</title>
    <script src="https://cdn.tailwindcss.com"></script>
    <style>
        body {
            font-family: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "WenQuanYi Micro Hei", sans-serif;
            -webkit-tap-highlight-color: transparent;
        }
        .scrollbar-hide::-webkit-scrollbar {
            display: none;
        }
        .scrollbar-hide {
            -ms-overflow-style: none;
            scrollbar-width: none;
        }
        .card-shadow {
            box-shadow: 0 4px 20px rgba(37, 99, 235, 0.1);
        }
    </style>
</head>
<body class="bg-gray-50 text-gray-800">
    <div class="page bg-white min-h-screen overflow-y-auto pb-24">
        <!-- 头部 -->
        <div class="sticky top-0 z-10 bg-white border-b border-gray-100">
            <div class="flex items-center justify-between p-4">
                <a href="index.html" class="flex items-center">
                    <svg xmlns="http://www.w3.org/2000/svg" class="h-5 w-5 text-gray-500" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 19l-7-7 7-7" />
                    </svg>
                </a>
                <h1 class="text-lg font-bold">房贷计算器</h1>
                <div class="w-5"></div>
            </div>
        </div>

        <!-- 计算器主体 -->
        <div class="p-4">
            <div class="mb-6 bg-blue-50 rounded-xl p-5">
                <div class="flex justify-between items-center mb-4">
                    <h2 class="text-lg font-bold text-blue-600">预估月供</h2>
                    <div class="text-2xl font-bold text-blue-600" id="monthlyPayment">¥9,698</div>
                </div>
                <div class="grid grid-cols-2 gap-4 text-sm">
                    <div>
                        <div class="text-gray-500 mb-1">贷款总额</div>
                        <div class="font-medium" id="loanAmountDisplay">195万元</div>
                    </div>
                    <div>
                        <div class="text-gray-500 mb-1">还款总额</div>
                        <div class="font-medium" id="totalPayment">349.1万元</div>
                    </div>
                    <div>
                        <div class="text-gray-500 mb-1">支付利息</div>
                        <div class="font-medium" id="totalInterest">154.1万元</div>
                    </div>
                    <div>
                        <div class="text-gray-500 mb-1">贷款期限</div>
                        <div class="font-medium" id="loanTermDisplay">30年(360期)</div>
                    </div>
                </div>
            </div>

            <!-- 计算参数 -->
            <div class="mb-4">
                <label class="block text-sm text-gray-500 mb-1">房屋总价</label>
                <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                    <input type="number" id="totalPrice" value="300" class="flex-grow p-3 text-base outline-none">
                    <span class="px-3 text-gray-500">万元</span>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm text-gray-500 mb-1">贷款金额</label>
                <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                    <input type="number" id="loanAmount" value="195" class="flex-grow p-3 text-base outline-none">
                    <span class="px-3 text-gray-500">万元</span>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm text-gray-500 mb-1">首付比例</label>
                <div class="grid grid-cols-3 gap-3">
                    <button class="downpayment-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-ratio="0.3">3成</button>
                    <button class="downpayment-btn py-2 bg-blue-600 text-white rounded-lg text-sm" data-ratio="0.35">3.5成</button>
                    <button class="downpayment-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-ratio="0.4">4成</button>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm text-gray-500 mb-1">贷款年限</label>
                <div class="grid grid-cols-4 gap-3">
                    <button class="loan-year-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-year="10">10年</button>
                    <button class="loan-year-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-year="20">20年</button>
                    <button class="loan-year-btn py-2 bg-blue-600 text-white rounded-lg text-sm" data-year="30">30年</button>
                    <button class="loan-year-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-year="custom">自定义</button>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm text-gray-500 mb-1">贷款方式</label>
                <div class="grid grid-cols-3 gap-3">
                    <button class="loan-type-btn py-2 bg-blue-600 text-white rounded-lg text-sm" data-rate="4.35">商业贷款</button>
                    <button class="loan-type-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-rate="3.25">公积金贷款</button>
                    <button class="loan-type-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-rate="3.80">组合贷款</button>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm text-gray-500 mb-1">贷款利率</label>
                <div class="flex items-center border border-gray-300 rounded-lg overflow-hidden">
                    <input type="text" id="interestRate" value="4.35" class="flex-grow p-3 text-base outline-none">
                    <span class="px-3 text-gray-500">%</span>
                </div>
            </div>
            
            <div class="mb-4">
                <label class="block text-sm text-gray-500 mb-1">还款方式</label>
                <div class="grid grid-cols-2 gap-3">
                    <button class="repayment-method-btn py-2 bg-blue-600 text-white rounded-lg text-sm" data-method="equal-principal-interest">等额本息</button>
                    <button class="repayment-method-btn py-2 border border-gray-300 text-gray-500 rounded-lg text-sm" data-method="equal-principal">等额本金</button>
                </div>
            </div>
            
            <button id="calculateBtn" class="w-full bg-blue-600 text-white rounded-full py-3 font-medium shadow-lg shadow-blue-600/20 mt-4 mb-8">
                计算结果
            </button>
            
            <!-- 还款计划 -->
            <div class="mb-4">
                <h3 class="text-base font-medium mb-3 flex items-center">
                    <span class="w-1 h-5 bg-blue-600 rounded mr-2"></span>
                    还款计划
                </h3>
                
                <div class="bg-blue-50 rounded-lg p-4 mb-4">
                    <div class="flex justify-between items-center mb-3">
                        <span class="text-gray-500">第一年还款总额</span>
                        <span class="text-blue-600 font-medium" id="firstYearPayment">116,376元</span>
                    </div>
                    <div class="flex justify-between items-center">
                        <span class="text-gray-500">第一年利息总额</span>
                        <span class="text-gray-800" id="firstYearInterest">84,708元</span>
                    </div>
                </div>
                
                <div class="overflow-x-auto">
                    <table class="w-full text-sm">
                        <thead>
                            <tr class="text-left bg-gray-50">
                                <th class="p-3 font-medium">期数</th>
                                <th class="p-3 font-medium">月供</th>
                                <th class="p-3 font-medium">本金</th>
                                <th class="p-3 font-medium">利息</th>
                                <th class="p-3 font-medium">剩余本金</th>
                            </tr>
                        </thead>
                        <tbody id="paymentSchedule">
                            <!-- 还款计划表将通过JavaScript生成 -->
                        </tbody>
                    </table>
                </div>
            </div>
        </div>
    </div>

    <!-- 底部导航 -->
    <div class="fixed bottom-0 left-0 right-0 bg-white border-t border-gray-200 z-20">
        <div class="grid grid-cols-5 h-16">
            <a href="index.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 12l2-2m0 0l7-7 7 7m-7-7v14" />
                </svg>
                <span class="text-xs mt-1">首页</span>
            </a>
            <a href="property-list.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 21V5a2 2 0 00-2-2H7a2 2 0 00-2 2v16m14 0h2m-2 0h-5m-9 0H3m2 0h5M9 7h1m-1 4h1m4-4h1m-1 4h1m-5 10v-5a1 1 0 011-1h2a1 1 0 011 1v5m-4 0h4" />
                </svg>
                <span class="text-xs mt-1">楼盘列表</span>
            </a>
            <a href="floor-plan-list.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 20l-5.447-2.724A1 1 0 013 16.382V5.618a1 1 0 011.447-.894L9 7m0 13l6-3m-6 3V7m6 10l4.553 2.276A1 1 0 0021 18.382V7.618a1 1 0 00-.553-.894L15 4m0 13V4m0 0L9 7" />
                </svg>
                <span class="text-xs mt-1">户型列表</span>
            </a>
            <a href="appointment.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 7V3m8 4V3m-9 8h10M5 21h14a2 2 0 002-2V7a2 2 0 00-2-2H5a2 2 0 00-2 2v12a2 2 0 002 2z" />
                </svg>
                <span class="text-xs mt-1">预约看房</span>
            </a>
            <a href="my.html" class="flex flex-col items-center justify-center text-gray-400">
                <svg xmlns="http://www.w3.org/2000/svg" class="h-6 w-6" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                    <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z" />
                </svg>
                <span class="text-xs mt-1">我的</span>
            </a>
        </div>
    </div>

    <script>
        // 房贷计算器变量
        let totalPrice = 300; // 总价 (万元)
        let downpaymentRatio = 0.35; // 首付比例 (默认3.5成)
        let loanYears = 30; // 贷款年限 (默认30年)
        let interestRate = 4.35; // 贷款利率 (默认4.35%)
        let repaymentMethod = 'equal-principal-interest'; // 还款方式 (默认等额本息)
        
        // 首付按钮
        document.querySelectorAll('.downpayment-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的选中状态
                document.querySelectorAll('.downpayment-btn').forEach(b => {
                    b.classList.remove('bg-blue-600', 'text-white');
                    b.classList.add('border-gray-300', 'text-gray-500');
                });
                
                // 添加选中状态
                this.classList.remove('border-gray-300', 'text-gray-500');
                this.classList.add('bg-blue-600', 'text-white');
                
                // 更新首付比例
                downpaymentRatio = parseFloat(this.getAttribute('data-ratio'));
                updateCalculation();
            });
        });
        
        // 贷款年限按钮
        document.querySelectorAll('.loan-year-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的选中状态
                document.querySelectorAll('.loan-year-btn').forEach(b => {
                    b.classList.remove('bg-blue-600', 'text-white');
                    b.classList.add('border-gray-300', 'text-gray-500');
                });
                
                // 添加选中状态
                this.classList.remove('border-gray-300', 'text-gray-500');
                this.classList.add('bg-blue-600', 'text-white');
                
                // 更新贷款年限
                const year = this.getAttribute('data-year');
                if (year !== 'custom') {
                    loanYears = parseInt(year);
                    updateCalculation();
                } else {
                    // 自定义年限逻辑
                    const customYear = prompt('请输入贷款年限 (1-30年):', loanYears);
                    if (customYear !== null && !isNaN(customYear) && customYear > 0 && customYear <= 30) {
                        loanYears = parseInt(customYear);
                        updateCalculation();
                    }
                }
            });
        });
        
        // 贷款方式按钮
        document.querySelectorAll('.loan-type-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的选中状态
                document.querySelectorAll('.loan-type-btn').forEach(b => {
                    b.classList.remove('bg-blue-600', 'text-white');
                    b.classList.add('border-gray-300', 'text-gray-500');
                });
                
                // 添加选中状态
                this.classList.remove('border-gray-300', 'text-gray-500');
                this.classList.add('bg-blue-600', 'text-white');
                
                // 更新贷款利率
                interestRate = parseFloat(this.getAttribute('data-rate'));
                document.getElementById('interestRate').value = interestRate;
                updateCalculation();
            });
        });
        
        // 还款方式按钮
        document.querySelectorAll('.repayment-method-btn').forEach(btn => {
            btn.addEventListener('click', function() {
                // 移除其他按钮的选中状态
                document.querySelectorAll('.repayment-method-btn').forEach(b => {
                    b.classList.remove('bg-blue-600', 'text-white');
                    b.classList.add('border-gray-300', 'text-gray-500');
                });
                
                // 添加选中状态
                this.classList.remove('border-gray-300', 'text-gray-500');
                this.classList.add('bg-blue-600', 'text-white');
                
                // 更新还款方式
                repaymentMethod = this.getAttribute('data-method');
                updateCalculation();
            });
        });
        
        // 监听总价输入
        document.getElementById('totalPrice').addEventListener('input', function() {
            totalPrice = parseFloat(this.value) || 0;
            // 如果用户没有手动修改贷款金额，则自动计算
            if (!document.getElementById('loanAmount').dataset.userModified) {
                document.getElementById('loanAmount').value = (totalPrice * (1 - downpaymentRatio)).toFixed(2);
            }
            updateCalculation();
        });
        
        // 监听贷款金额输入
        document.getElementById('loanAmount').addEventListener('input', function() {
            // 标记为用户已修改
            this.dataset.userModified = true;
            updateCalculation();
        });
        
        // 监听利率输入
        document.getElementById('interestRate').addEventListener('input', function() {
            interestRate = parseFloat(this.value) || 0;
            updateCalculation();
        });
        
        // 计算按钮
        document.getElementById('calculateBtn').addEventListener('click', function() {
            updateCalculation();
            generatePaymentSchedule();
        });
        
        // 更新计算结果
        function updateCalculation() {
            // 获取当前贷款金额
            const loanAmount = parseFloat(document.getElementById('loanAmount').value) || 0;
            
            // 更新显示的贷款金额
            document.getElementById('loanAmountDisplay').textContent = loanAmount + '万元';
            document.getElementById('loanTermDisplay').textContent = loanYears + '年(' + (loanYears * 12) + '期)';
            
            // 计算月供和总利息
            if (repaymentMethod === 'equal-principal-interest') {
                // 等额本息
                const monthlyRate = interestRate / 100 / 12;
                const numberOfPayments = loanYears * 12;
                const monthlyPayment = (loanAmount * 10000 * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -numberOfPayments));
                
                // 计算总利息
                const totalPayment = monthlyPayment * numberOfPayments;
                const totalInterest = totalPayment - loanAmount * 10000;
                
                // 更新界面
                document.getElementById('monthlyPayment').textContent = '¥' + formatNumber(monthlyPayment.toFixed(2));
                document.getElementById('totalPayment').textContent = formatNumber((totalPayment / 10000).toFixed(2)) + '万元';
                document.getElementById('totalInterest').textContent = formatNumber((totalInterest / 10000).toFixed(2)) + '万元';
                
                // 计算第一年还款
                const firstYearPayment = monthlyPayment * 12;
                const firstYearInterest = calculateFirstYearInterest(loanAmount * 10000, monthlyRate, monthlyPayment);
                
                document.getElementById('firstYearPayment').textContent = formatNumber(firstYearPayment.toFixed(2)) + '元';
                document.getElementById('firstYearInterest').textContent = formatNumber(firstYearInterest.toFixed(2)) + '元';
            } else {
                // 等额本金
                const monthlyRate = interestRate / 100 / 12;
                const numberOfPayments = loanYears * 12;
                const monthlyPrincipal = (loanAmount * 10000) / numberOfPayments;
                const firstMonthlyPayment = monthlyPrincipal + (loanAmount * 10000) * monthlyRate;
                
                // 计算总利息
                let totalInterest = 0;
                for (let i = 0; i < numberOfPayments; i++) {
                    const remainingPrincipal = loanAmount * 10000 - i * monthlyPrincipal;
                    totalInterest += remainingPrincipal * monthlyRate;
                }
                
                // 更新界面
                document.getElementById('monthlyPayment').textContent = '¥' + formatNumber(firstMonthlyPayment.toFixed(2)) + '起';
                document.getElementById('totalPayment').textContent = formatNumber(((loanAmount * 10000 + totalInterest) / 10000).toFixed(2)) + '万元';
                document.getElementById('totalInterest').textContent = formatNumber((totalInterest / 10000).toFixed(2)) + '万元';
                
                // 计算第一年还款
                let firstYearPayment = 0;
                let firstYearInterest = 0;
                
                for (let i = 0; i < 12; i++) {
                    const remainingPrincipal = loanAmount * 10000 - i * monthlyPrincipal;
                    const monthInterest = remainingPrincipal * monthlyRate;
                    const payment = monthlyPrincipal + monthInterest;
                    
                    firstYearPayment += payment;
                    firstYearInterest += monthInterest;
                }
                
                document.getElementById('firstYearPayment').textContent = formatNumber(firstYearPayment.toFixed(2)) + '元';
                document.getElementById('firstYearInterest').textContent = formatNumber(firstYearInterest.toFixed(2)) + '元';
            }
        }
        
        // 计算第一年利息 (等额本息)
        function calculateFirstYearInterest(principal, monthlyRate, monthlyPayment) {
            let remainingPrincipal = principal;
            let totalInterest = 0;
            
            for (let i = 0; i < 12; i++) {
                const interest = remainingPrincipal * monthlyRate;
                const principalPaid = monthlyPayment - interest;
                remainingPrincipal -= principalPaid;
                totalInterest += interest;
            }
            
            return totalInterest;
        }
        
        // 生成还款计划表
        function generatePaymentSchedule() {
            const loanAmount = parseFloat(document.getElementById('loanAmount').value) * 10000 || 0;
            const monthlyRate = interestRate / 100 / 12;
            const numberOfPayments = loanYears * 12;
            const tableBody = document.getElementById('paymentSchedule');
            
            // 清空表格
            tableBody.innerHTML = '';
            
            // 仅显示前12期、中间1期和最后1期
            let displayPeriods = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10, 11, 12];
            
            if (numberOfPayments > 24) {
                displayPeriods.push(Math.floor(numberOfPayments / 2));
            }
            
            if (numberOfPayments > 12) {
                displayPeriods.push(numberOfPayments);
            }
            
            if (repaymentMethod === 'equal-principal-interest') {
                // 等额本息
                const monthlyPayment = (loanAmount * monthlyRate) / (1 - Math.pow(1 + monthlyRate, -numberOfPayments));
                let remainingPrincipal = loanAmount;
                
                for (let period = 1; period <= numberOfPayments; period++) {
                    const interest = remainingPrincipal * monthlyRate;
                    const principalPaid = monthlyPayment - interest;
                    remainingPrincipal -= principalPaid;
                    
                    if (displayPeriods.includes(period)) {
                        addTableRow(tableBody, period, monthlyPayment, principalPaid, interest, remainingPrincipal);
                    }
                    
                    // 在第12期和中间期之间添加省略符号
                    if (period === 12 && numberOfPayments > 24) {
                        addEllipsisRow(tableBody);
                    }
                    
                    // 在中间期和最后期之间添加省略符号
                    if (period === Math.floor(numberOfPayments / 2) && numberOfPayments > 24) {
                        addEllipsisRow(tableBody);
                    }
                }
            } else {
                // 等额本金
                const monthlyPrincipal = loanAmount / numberOfPayments;
                let remainingPrincipal = loanAmount;
                
                for (let period = 1; period <= numberOfPayments; period++) {
                    const interest = remainingPrincipal * monthlyRate;
                    const payment = monthlyPrincipal + interest;
                    remainingPrincipal -= monthlyPrincipal;
                    
                    if (displayPeriods.includes(period)) {
                        addTableRow(tableBody, period, payment, monthlyPrincipal, interest, remainingPrincipal);
                    }
                    
                    // 在第12期和中间期之间添加省略符号
                    if (period === 12 && numberOfPayments > 24) {
                        addEllipsisRow(tableBody);
                    }
                    
                    // 在中间期和最后期之间添加省略符号
                    if (period === Math.floor(numberOfPayments / 2) && numberOfPayments > 24) {
                        addEllipsisRow(tableBody);
                    }
                }
            }
        }
        
        // 添加表格行
        function addTableRow(tableBody, period, payment, principal, interest, remaining) {
            const row = document.createElement('tr');
            row.className = 'border-b border-gray-100';
            
            row.innerHTML = `
                <td class="p-3">${period}</td>
                <td class="p-3">${formatNumber(payment.toFixed(2))}</td>
                <td class="p-3">${formatNumber(principal.toFixed(2))}</td>
                <td class="p-3">${formatNumber(interest.toFixed(2))}</td>
                <td class="p-3">${formatNumber(remaining.toFixed(2))}</td>
            `;
            
            tableBody.appendChild(row);
        }
        
        // 添加省略行
        function addEllipsisRow(tableBody) {
            const row = document.createElement('tr');
            row.className = 'text-center';
            
            row.innerHTML = `
                <td colspan="5" class="p-2">
                    <div class="flex justify-center items-center">
                        <span class="w-1 h-1 bg-gray-300 rounded-full mx-0.5"></span>
                        <span class="w-1 h-1 bg-gray-300 rounded-full mx-0.5"></span>
                        <span class="w-1 h-1 bg-gray-300 rounded-full mx-0.5"></span>
                    </div>
                </td>
            `;
            
            tableBody.appendChild(row);
        }
        
        // 数字格式化（添加千位分隔符）
        function formatNumber(num) {
            return num.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",");
        }
        
        // 初始计算
        updateCalculation();
        generatePaymentSchedule();
    </script>
</body>
</html> 